<template>
  <div>
    <el-dialog
      title="强化练习设置"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="600px"
    >
      <div v-if="dialogVisible">
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="练习名称" prop="name">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="错题集"
                :prop="`subjectRule[0].bankIds`"
                :rules="{
                  required: true,
                  message: '请选择错题集',
                  trigger: 'change',
                }"
              >
                <el-select
                  v-model="form.subjectRule[0].bankIds"
                  multiple
                  collapse-tags
                  placeholder="请选择错题集"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in tableData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="题型"
                :prop="`subjectRule[0].subjectType`"
                :rules="{
                  required: true,
                  message: '请选择题型',
                  trigger: 'change',
                }"
              >
                <!-- 选择题型 -->
                <QuestionTypeSelect
                  @emit="(m) => (form.subjectRule[0].subjectType = m)"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="难度"
                :prop="`subjectRule[0].subjectDifficulty`"
                :rules="{
                  required: true,
                  message: '请选择难度',
                  trigger: 'change',
                }"
              >
                <QuestionDifficultySelect
                  @emit="(m) => (form.subjectRule[0].subjectDifficulty = m)"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="试题数量"
                :prop="`subjectRule[0].subjectNum`"
                :rules="{
                  required: true,
                  message: '请选择试题数量',
                  trigger: 'change',
                }"
              >
                <el-select
                  v-model="form.subjectRule[0].subjectNum"
                  placeholder="请选择试题数量"
                  style="width: 100%"
                >
                  <el-option label="5题" :value="5"> </el-option>
                  <el-option label="10题" :value="10"> </el-option>
                  <el-option label="20题" :value="20"> </el-option>
                  <el-option label="30题" :value="30"> </el-option>
                  <el-option label="50题" :value="50"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="custom" v-preventReClick @click="submitForm('form')"
          >开始练习</el-button
        >
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  components: {
    QuestionTypeSelect: () =>
      import('@/views/Admin/exam/public/QuestionTypeSelect.vue'),
    QuestionDifficultySelect: () =>
      import('@/views/Admin/exam/public/QuestionDifficultySelect.vue'),
  },
  data() {
    return {
      dialogVisible: false,
      form: {
        name: '',
        exercisesType: '2', //练习类型：1-常规练习，2-强化练习
        subjectRule: [
          {
            chapter: '强化练习',
            bankIds: [],
            subjectDifficulty: '',
            subjectNum: '',
            subjectType: '',
          },
        ],
      },
      rules: {
        name: [{ required: true, message: '请输入练习名称', trigger: 'blur' }],
      },
      listQuery: {
        page: 1,
        limit: 9999,
        pid: 0,
        classType: '4', //1.试卷 2.考试 3.栏目 4.错题集
        status: '1',
      },
      tableData: [],
    }
  },
  mounted() {
    this.$bus.$on('showDialogIntensifyExerciseSet', this.getList)
  },
  beforeDestroy() {
    this.$bus.$off('showDialogIntensifyExerciseSet')
  },
  methods: {
    //查询错题集分类
    async getList() {
      this.listQuery.createBy = this.$store.getters.userId
      let res = await this.$store.dispatch('sysClassifyList', this.listQuery)
      this.tableData = res.data
      this.dialogVisible = true
    },
    submitForm(form) {
      this.$refs[form].validate(async (valid) => {
        if (valid) {
          let res = await this.$store.dispatch('addTestExercisesHis', this.form)
          if (res.data[0].subjectNum == 0) {
            this.warnMsg('没有匹配到习题，请重新设置练习条件')
            return
          }
          this.$bus.$emit('showDialogExercising', res.data[0])
          this.dialogVisible = false
        }
      })
    },
  },
}
</script>
<style scoped lang="scss">
</style>